<template>
  <div class="add">
    <el-main>
      <el-tabs>
        <el-tab-pane class="detail" label="缴费信息详情">
          <el-row :gutter="20">
            <el-col :span="18">
              <el-form ref="unitDetail" label-width="120px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="缴费产品">
                      <el-input v-model="unitDetail.payname" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="缴费人员">
                      <el-input v-model="unitDetail.username" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="缴费金额">
                      <el-input v-model="unitDetail.paymoney" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="缴费优先级">
                      <el-input v-model="unitDetail.paylevel" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支付时间">
                      <el-input v-model="unitDetail.costtime" placeholder="Invalid date" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="支付状态">
                      <el-input type="text" v-model="unitDetail.paystatus" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="支付类型">
                  <el-radio-group disabled>
                    <el-radio v-for="item in paytypeOptions" :key="item.value" :label="item.value">
                      <img :src="item.img" alt="支付类型图标" style="width: 100px; height: 100px; vertical-align: middle;">
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="回复内容">
                  <el-input type="textarea" v-model="unitDetail.unitcontext" disabled></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6" class="btn-container">
              <div class="btn">
                <el-button type="primary" @click="$router.push('/home/pay/payMessage')">返回</el-button>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: ['type'],
      unitcontext: '',
      editorOption: {},
      qurreyInfo: {
        value: ''
      },
      unitDetail: {},
      unitForm: {
        u_id: '',
        communityname: '',
        unitname: '',
        unitnum: '',
        unitstatus: '',
        unitcontext: '',
        token: sessionStorage.token
      },
      statusOptions: [
        { value: '1', label: '已支付' },
        { value: '2', label: '未支付' },
      ],
      paytypeOptions: [
        { value: '1', img: require('@/assets/img/zfb.png'), label: '支付宝' },
        { value: '2', img: require('@/assets/img/wx.png'), label: '微信' },
        { value: '3', img: require('@/assets/img/ysf.png'), label: '云闪付' },
      ],
    }
  },
  computed: {
    getStatusLabel() {
      return (unitstatus) => {
        const status = this.statusOptions.find(option => option.value == unitstatus);
        return status ? status.label : '未支付';
      };
    }
  },
  methods: {
    async getUnitDetail() {
      const { data: res } = await this.axios.get('/cost/getCostDetail', {
        params: {
          id: this.id,
          token: sessionStorage.token
        }
      });
      console.log(res[0]);
      this.unitDetail = res[0];
      this.unitDetail.paystatus = this.getStatusLabel(this.unitDetail.paystatus);
    },
  },
  created() {
    console.log('id:', this.$route.query.detailId);
    this.id = this.$route.query.detailId;
  },
  mounted() {
    this.getUnitDetail();
  }
}
</script>

<style scoped lang="scss">
.add {
  height: 100%;
  margin: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .el-tabs {
    .el-tab-pane {
      margin: 30px;
      display: flex;
      flex-direction: column;

      .el-form {
        display: flex;
        flex-direction: column;
        margin: 10px 30px;

        .el-form-item {
          margin: 10px 0;
          flex: 1;
          min-width: 100%;

          &.full-width {
            width: 100%;
          }

          .el-input, .el-textarea {
            width: 100%;
          }

          .el-radio-group {
            display: flex;
            flex-wrap: wrap;

            .el-radio {
              margin-right: 20px;
              margin-bottom: 10px;
            }
          }
        }
      }

      .btn-container {
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
          text-align: center;

          .el-button {
            width: 120px;
          }
        }
      }
    }
  }
}
</style>